<template>
	<div class="send_coupon">
		<header>分发优惠券</header>
		<div class="contents">
			<div class="conditions">
				<div class="condition_1">
					<div class="market_type">
						<span>会员账号：</span>
						<el-input v-model.trim="input1" placeholder="请输入手机号" style="width:300px;"></el-input>
					</div>
					<div class="status">
						<span>会员等级：</span>
						<el-select v-model="value1" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
					<el-button @click.native="resets">重置</el-button>
				</div>
				<div class="condition_2">
					<div class="keywords">
						<span>注册日期：</span>
						<el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
					</div>
				</div>
				<div class="selected" v-if="selectArr.length>0">
					<p>
						<img src="../../assets/images/market/select2.png" alt="" />
						<span>已选择&nbsp;
							<label>{{selectArr.length}}</label>&nbsp;项</span>
					</p>
				</div>
				<div class="tables">
					<el-table v-loading="loading" :data="actList" style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50"> </el-table-column>
						<el-table-column prop="PHONE" label="会员手机号" width="200"> </el-table-column>
						<el-table-column prop="DREGDT" label="注册时间" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.DREGDT">{{ scope.row.DREGDT | filterTimesss}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="USERGRADE" label="等级" width="200">
							<template slot-scope="scope">
								<span class="remains" v-if="scope.row.USERGRADE==1">普通</span>
								<span class="remains" v-if="scope.row.USERGRADE==2">银卡</span>
								<span class="remains" v-if="scope.row.USERGRADE==3">金卡</span>
								<span class="remains" v-if="scope.row.USERGRADE==4">钻石</span>
							</template>
						</el-table-column>
						<el-table-column prop="BIRTHDAY" label="会员生日" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.BIRTHDAY">{{ scope.row.DREGDT | filterTimes}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column prop="CURRENTPOINT" label="积分" width="200"> </el-table-column>
						<el-table-column prop="NUM" label="优惠券" width="200"> </el-table-column>
						<el-table-column prop="AMOUNT" label="余额" width="200">
							<template slot-scope="scope">
								<span v-if="scope.row.AMOUNT">￥{{ scope.row.AMOUNT}}</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 12, 18]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.TOTAL"> </el-pagination>
				</div>
				<div class="footers">
					<div class="footers_left">
						<el-radio v-model="radios" label="1">已选中(
							<span>{{selectArr.length}}</span>)</el-radio>
						<el-radio v-model="radios" label="2">全部(
							<span>{{tableDatas.TOTAL}}</span>)</el-radio>
					</div>
					<div class="footers_right">
						<el-button>重置</el-button>
						<el-button type="danger" style="background:#e7251a;" @click.native="send">发送</el-button>
					</div>
				</div>
			</div>
		</div>
		<!--发送优惠券-->
		<el-dialog title="发送优惠券" :visible.sync="dialog1" width="35%">
			<div class="dialog_box">
				<div class="dialog_datas">
					<div class="dialog_data" v-for="item in sendData">
						<el-input style="width:296px;" v-model="item.SUBJECT"></el-input>
						<span style="font-size:30px;margin:20px;">×</span>
						<el-input class="i_num" style="width:44px;" v-model="item.NUM"></el-input>
					</div>
				</div>
				<div class="dialog_btn">
					<el-button @click="dialog1=false">取消</el-button>
					<el-button type="danger" style="background:#e7251a;" @click.native="ensures">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { cafeMemberList } from '@/api/coupon';
	import { issueCashVolume } from '@/api/coupon';
	import { getCashVolumeRecordList } from '@/api/coupon'
	import { setCookie, getCookie } from '@/assets/js/cookie'
	export default {
		name: 'coupon',
		data() {
			return {
				userID: '', //用户id    
				value1: '', //会员等级
				value2: '', //注册日期
				pickerOptions1: {
					shortcuts: [{
						text: '最近一天',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一年',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				input1: '', //手机号
				options1: [{
					value: 1,
					label: '普通'
				}, {
					value: 2,
					label: '银卡'
				}, {
					value: 3,
					label: '金卡'
				}, {
					value: 4,
					label: '钻石'
				}],
				tableDatas: [],
				selectArr: [], //已选择的数组集合
				radios: '0', //1-选中 2-全部 0-不选中
				dialog1: false, //是否显示发送优惠券      
				sendData: [], //发送优惠券数据
				allDatas: [], //优惠券数据
				loading: true,
				page1: 1, //当前页数
				pageSize1: 6, //每页多少条
				objss: '',
			}
		},
		computed: {
			//请求参数
			objs() {
				let obj = {};
				obj.PAGE_NO = this.page1; //页码
				obj.PAGE_SIZE = this.pageSize1; //每页多少条
				this.input1 ? obj.PHONE = this.input1 : null; //用户手机
				this.value1 ? obj.GRADE = this.value1 : null; //等级
				if(this.value2.length > 0) {
					obj.STARTTIME = this.value2[0].getTime();
					obj.ENDTIME = this.value2[1].getTime();
				}
				return obj;
			},
			//会员列表
			listDatas() {
				this.loading = true;
				//会员列表
				cafeMemberList(this.objs).then(res => {
					if(res.data.STATUS_CODE === 1) {
						this.loading = false;
						this.tableDatas = res.data;
					}
				})
			},
			//分页数据
			actList() {
				this.listDatas;
				if(this.tableDatas.CAFEMEMARR) {
					return this.tableDatas.CAFEMEMARR;
				}
			}
		},
		created() {
			this.userID = getCookie('userId');
			this.listDatas;
			//优惠劵列表
			getCashVolumeRecordList({
				PAGE_NO: getCookie('currentPage'),
				PAGE_SIZE: getCookie('pageSize')
			}).then(res => {
				if(res.data.STATUS_CODE === 1) {
					this.allDatas = res.data.CASHVOLUMERECORDARR;
				}
			})
		},
		methods: {
			//选中checkbox
			handleSelectionChange(val) {
				this.selectArr = val;
				//console.log(this.selectArr);
				if(this.selectArr.length > 0 && this.selectArr.length != this.actList.length) {
					this.radios = '1';
				} else if(this.selectArr.length > 0 && this.selectArr.length == this.actList.length) {
					this.radios = '2';
				} else {
					this.radios = '0';
				}
			},
			handleSizeChange(val) {
				this.pageSize1 = val;
			},
			handleCurrentChange(val) {
				this.page1 = val;
			},
			//发送券
			send() {
				if(this.selectArr.length === 0) {
					this.$alert('请选择会员', '提示', {
						confirmButtonText: '确定'
					});
					return;
				}
				//---------------会员id拼接start------------
				let strr = '';
				for(let i = 0; i < this.selectArr.length; i++) {
					strr += this.selectArr[i].USERID + ',';
				}
				strr = strr.substring(0, strr.length - 1);
				//---------------会员id拼接end------------
				//----------优惠券记录集合封装start-------------
				let ticketID = getCookie('ticketID');
				let newArr = [];
				if(ticketID.search(/,/) > 0) { //批量分发
					for(let i = 0; i < this.allDatas.length; i++) {
						for(let j = 0; j < ticketID.split(',').length; j++) {
							if(this.allDatas[i].CASHVOLUMERECORDID == ticketID.split(',')[j]) {
								delete(this.allDatas[i].CATEGORY);
								delete(this.allDatas[i].EXPDATE);
								delete(this.allDatas[i].STARTDATE);
								delete(this.allDatas[i].STATUS);
								delete(this.allDatas[i].USERANGE);
								newArr.push(this.allDatas[i]);
							}
						}
					}
				} else { //单个分发
					for(let i = 0; i < this.allDatas.length; i++) {
						if(this.allDatas[i].CASHVOLUMERECORDID == ticketID) {
							delete(this.allDatas[i].CATEGORY);
							delete(this.allDatas[i].EXPDATE);
							delete(this.allDatas[i].STARTDATE);
							delete(this.allDatas[i].STATUS);
							delete(this.allDatas[i].USERANGE);
							newArr.push(this.allDatas[i]);
						}
					}
				}
				//console.log(newArr);
				//----------优惠券记录集合封装end-------------
				let obj = {};
				obj.CAFEUSERID = this.userID; //用户id
				obj.CARUSERIDS = strr; //会员id
				obj.CASHVOLUMERECORDARR = JSON.stringify(newArr); //优惠劵记录集合
				this.sendData = JSON.parse(JSON.stringify(newArr));
				this.objss = obj;
				//console.log(obj);return;
				this.dialog1 = true;
			},
			//确定
			ensures() {
				let flagss = true; //防止重复提交
				if(flagss) {
					issueCashVolume(this.objss).then(res => {
						flagss = false;
						if(res.data.STATUS_CODE === 1) {
							let flagss = true;
							this.$message({
								type: 'success',
								message: '发送成功'
							});
							this.dialog1 = false;
							setTimeout(() => this.$router.push({
								path: '/functions/coupon'
							}), 1500);
						}
					})
				}
			},
			//查询
			querys() {
				this.listDatas;
			},
			//重置
			resets() {
				this.input1 = this.value1 = this.value2 = '';
			},
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.send_coupon {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			width: 97%;
			margin: 25px auto;
			padding: 25px;
			background: #fff;
			.conditions {
				span {
					white-space: nowrap;
				}
				.condition_1 {
					display: flex;
					.status {
						margin: 0 35px;
					}
				}
				.condition_2 {
					display: flex;
					margin: 20px 0;
					.keywords {
						display: flex;
						align-items: center;
						.el-input {
							width: 210px;
						}
					}
				}
				.selected {
					margin-top: 15px;
					border: 1px solid #f0f0f0;
					border-radius: 5px;
					background: #fafafa;
					p {
						display: flex;
						align-items: center;
						img {
							width: 20px;
							height: 20px;
							margin: 0 10px;
						}
						span {
							font-size: 16px;
							color: #717a7d;
							label {
								color: #e7251a;
							}
						}
					}
				}
				.tables {
					margin-top: 15px;
					.el-pagination {
						text-align: center;
						margin-top: 30px;
					}
					.editStatus, .edits {
						color: #1d93ff;
						cursor: pointer;
						margin: 0 2px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.footers {
					display: flex;
					justify-content: space-between;
					margin-top: 55px;
					.footers_left {
						display: flex;
					}
					.footers_right {
						display: flex;
					}
				}
			}
		}
		.dialog_box {
			border-top: 1px solid #f0f0f0;
			.dialog_datas {
				border-top: 1px solid #f0f0f0;
				border-bottom: 1px solid #f0f0f0;
				padding: 10px 0 30px 0;
				box-sizing: border-box;
				max-height: 400px;
				overflow-y: auto;
				.dialog_data {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.dialog_btn {
				display: flex;
				justify-content: flex-end;
				padding: 15px 30px 0 0;
			}
		}
	}
</style>